<template>
  <view class="container">
    <!-- 个人信息 -->
    <!-- 只要在小程序的环境下才会显示 -->
    <!-- #ifdef MP-WEIXIN-->
    <view class="info">
      <view class="left">
        <!-- 昵称 -->

        <view class="nickname">
          {{ authheadnickname.nickName ? authheadnickname.nickName : "请登录授权" }}
        </view>
      </view>
      <view class="right">


        <view class="avatar xcx">
          <u-avatar :src="authheadnickname.avatarUrl" size="100"> </u-avatar>
        </view>
      </view>
    </view>
    <!-- #endif -->

    <!-- 标签栏 -->
    <view class="banner-warpper">
      <view class="banner">
        <view class="left">
          <view class="group">
            {{ auth.group_text ? auth.group_text : "暂无角色组" }}
          </view>
          <view class="join">
            加入时间：{{ auth.createtime ? auth.createtime_text : "无" }}
          </view>
        </view>
        <view class="right">
          <!-- #ifdef MP-WEIXIN-->
          <u-button text="问题反馈" icon="chat" shape="circle" size="small" :customStyle="btnStyle" openType="feedback" />
          <!-- #endif -->
        </view>
      </view>
    </view>

    <!-- 宫格布局 -->
    <view class="grid1" v-if="auth && JSON.stringify(auth) != '{}'">
      <u-grid :border="false" col="4">
        <u-grid-item>
          <navigator class="menu" url="/pagesA/admin/profile">
            <u-icon color="#19BC9C" size="45" name="order"></u-icon>
            <text>修改资料</text>
          </navigator>
        </u-grid-item>
        <u-grid-item>
          <navigator class="menu" url="/pagesA/admin/wechat">
            <u-icon color="#19BC9C" size="45" name="plus-circle"></u-icon>
            <text>微信绑定</text>
          </navigator>
        </u-grid-item>
        <u-grid-item>
          <navigator class="menu" url="/pagesA/admin/balance">
            <u-icon color="#926cac" size="45" name="red-packet"></u-icon>
            <text>我的账户</text>
          </navigator>
        </u-grid-item>
        <u-grid-item>
          <navigator class="menu" url="/pagesA/admin/shouru">
            <u-icon color="#617af7" size="45" name="rmb-circle-fill"></u-icon>
            <text>业绩收入</text>
          </navigator>
        </u-grid-item>
      </u-grid>
    </view>

    <!-- 登录后的 底部按钮 -->
    <view class="actions">
      <view class="contact">
        <!-- #ifdef MP-WEIXIN-->
        <u-button text="联系助手" icon="chat" size="large" openType="contact" />
        <!-- #endif -->
      </view>

      <view class="logout" v-if="auth || JSON.stringify(auth) == '{}'">
        <!-- #ifdef MP-WEIXIN-->

        <u-button  icon="weixin-circle-fill" size="large" type="primary"
          @click="login" :plain="true" text="微信一键授权"></u-button>

        <!-- #endif -->
      </view>
      <view v-else class="logout">
        <!-- #ifdef MP-WEIXIN-->

        <u-button type="error" text="注销登录" icon="setting" size="large" @click="logout" />
        <!-- #endif -->
      </view>

    </view>

    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>

    <!-- 模态框 -->
     <!-- 手机号获取 -->
    <u-popup :show="show" @close="close" @open="open">
      <view class="loginvalue">
        <view class="logotitle">
          <view class="logo">
            <image
              src="../../static/logo.png"
              style="width: 100%; height: 100%"
            ></image>
          </view>
          <view class="title">聚优先Me</view>
        </view>
        <view class="titlename">获取手机号</view>
        <view class="titlemin">您的手机号将用于登录</view>
        <view class="submitbox">
          <view @click="close" class="close">取消</view>
          <view @click="open" class="open">
            <button
              open-type="getPhoneNumber"
              @getphonenumber="getPhoneNumber"
              withCredentials="true"
            >
              获取手机号
            </button>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 头像获取 -->
    <u-popup mode="bottom" @close="close1" @open="open1" :show="show1">
      <view class="getnickbox">
        <view class="flex_align_center">
          <image
            src="../../static/logo.png"
            class="logoimg"
            mode="aspectFit"
          ></image>
          <view class="name">
            <text>奢总汇申请</text>
          </view>
        </view>
        <view class="m1 mt30">获取你的头像、昵称</view>
        <view class="m2">展示个人信息</view>
        <view class="xin1">
          <button
            type="default"
            class="flex_spacebetween buttoncss"
            open-type="chooseAvatar"
            @chooseavatar="chooseavatar"
          >
            <view class="flex_align_center toubox">
              <view class="t1">头像</view>
              <view v-if="authheadnickname.avatarUrl == ''" class="avatarbox">
                <u-icon name="account-fill" size="50" color="#999"></u-icon>
              </view>
              <image
                v-else
                :src="authheadnickname.avatarUrl"
                class="avatarimg"
              ></image>
            </view>
            <u-icon name="arrow-right" size="25" color="#999"></u-icon>
          </button>
        </view>
        <view class="nick">
          <view class="n1">昵称:</view>
          <input
            id="nickname"
            type="nickname"
            v-model="authheadnickname.nickName"
            placeholder="请输入昵称"
          />
        </view>
        <view class="fixedBtn wan">
          <u-button
            open-type="getUserInfo"
            type="primary"
            @click="getUserInfo"
            :plain="true"
            text="确认授权"
          ></u-button>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import routeqx from "../../services/route.js";

export default {
  onShow() {
    //获取一下登录信息,从本地存储中获取
    var auth = uni.getStorageSync("auth");

    //如果有登录信息的时候才去覆盖 data数据
    if (auth && JSON.stringify(auth) != "{}") {
      this.auth = auth;
    }else
    {
      this.login()
    }

    var authheadnickname = uni.getStorageSync("authheadnickname")
    //如果有登录信息的时候才去覆盖 data数据
    if (authheadnickname && JSON.stringify(authheadnickname) != "{}") {
      this.authheadnickname = authheadnickname;
    }
    
  },
  created() {
    this.$u.count.check();
  },
  data() {
    return {
      sdj: [],
      show1:false,
      show:false,
      ipAddress: "",
      authheadnickname: {
        avatarUrl:"",
        nickName:""
      },
      qxrouter: [],
      btnStyle: {
        width: "180rpx",
      },
      auth: {
        grouplist_text: {},
      },
      show: false,
      content: "是否确认退出登录",
    };
  },
  methods: {
    login()
    {
      this.show1 = true
    },
    close1()
    {
      this.show1 = false
    },
    close()
    {
      this.show = false

    },
    open()
    {
      this.show = true
    },
    open1()
    {
      this.show1 = true
    },
    //点击确认按钮
    confirm() {
      //隐藏框
      this.show = false;

      //删除本地存储
      uni.removeStorageSync("qxrouter");
      uni.removeStorageSync("auth");
      uni.removeStorageSync("ipAddress");
      uni.removeStorageSync("model");
      uni.removeStorageSync("empid");

      //data数据也要修改
      this.auth = {};
      this.qxrouter = [];

      // 提醒消息
      this.$refs.notice.show({
        type: "success",
        message: "退出成功",
        duration: 2000,
      });
    },

    logout() {
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    async getUserInfo() {
      if (this.authheadnickname.avatarUrl == "") {
        //如果头像为空，则弹出提示
        uni.showToast({
          title: "请选择头像",
          icon: "none",
        });
        return;
      }
      const query = uni.createSelectorQuery().in(this); //创建节点查询器
      query
        .select("#nickname")
        .fields({
          //选择Id=id的节点，获取节点位置信息的查询请求
          properties: ["value"],
        })
        .exec((res) => {
          this.authheadnickname.nickName = res?.[0]?.value;
          setTimeout(() => {
            let params = {
              language: "zh_CN",
              nickName: this.authheadnickname.nickName,
              avatarUrl: this.authheadnickname.avatarUrl,
            };
            this.authheadnickname = params;

            uni.setStorageSync("authheadnickname", this.authheadnickname);
              this.show1 = false;
              this.show = true;

            }, 100);
        });
    },

   chooseavatar(e) {
      //选择微信头像
      const { avatarUrl } = e.detail;
      this.authheadnickname.avatarUrl = e.detail.avatarUrl;
    },

    getPhoneNumber(mobile) {





      if (mobile.detail.errMsg.trim() == "getPhoneNumber:ok") {

       




                uni.login({
                  provider: 'weixin',
                  success: async (result) => {
                    var that = this


                    let data = {
                      logincode: result.code,
                      phonecode: mobile.detail.code,
                      encryptedDataStr: mobile.detail.encryptedData,
                      iv: mobile.detail.iv,
                      avatar: that.authheadnickname.avatarUrl,
                      nickname: that.authheadnickname.nickName,
                      userhead:that.authheadnickname.avatarUrl
                    }

                    var result = await that.$u.api.admin.login(data);

                    if (result.code == 0) {
                      that.$refs.notice.show({
                        type: "warning",
                        message:result.msg,
                        duration:1500
                      });
                      return false;
                    }

                    if (result.data) {
                      //说明授权已经找到管理员账号


                      uni.setStorageSync("auth", result.data);

                      let qxrouter = uni.getStorageSync("qxrouter");

                      //如果有登录信息的时候才去覆盖 data数据
                      if (qxrouter.length == 0) {
                        let arr = [];
                        that.auth = result.data;

                        let list = that.auth.grouplist_text;

                        let keysArray = Object.values(list);


                        keysArray.forEach((item, index) => {
                          let a = "/" + item;
                          arr.push(a);
                        });

                        that.qxrouter = uni.setStorageSync("qxrouter", arr);
                      }

                      that.getSystemInfo();
                      that.getIPAddress();

                      that.$refs.notice.show({
                        type: "success",
                        message: "授权登录成功",
                        duration: 1200,
                        complete: () => {
                          routeqx()
                          this.show = false
                          this.show1 = false
                        },
                      });

                      return false;
                    } else {
                      //授权成功，但是没有绑定账号
                      uni.$u.route({
                        url: result.url,
                      });
                      return false;
                    }

                  },
                  fail: () => {
                    that.$refs.notice.show({
                      type: 'error',
                      message: '授权登录临时凭证获取失败'
                    })
                  }
                })


              

      } else {
        // 用户点击取消按钮
        // 处理取消获取手机号的情况
        this.$refs.notice.show({
          type: "danger",
          message: "已取消获取手机号"
        })
      }

    },
  
    // 问题反馈
    feedback() {
      this.$refs.notice.show({
        type: "primary",
        message: "该功能仅支持小程序平台",
      });
      return false;
    },
    getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.systemInfo = res;
          uni.setStorageSync("model", this.systemInfo.model);
        },
      });
    },
    async getIPAddress() {
      uni.request({
        url: "https://ipapi.co/json/",
        success: (res) => {
          if (res.data.ip && typeof res.data.ip === "string") {
            this.ipAddress = res.data.ip;

            uni.setStorageSync("ipAddress", this.ipAddress);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
  .getnickbox {
    padding: 40rpx 20rpx;
    .flex_align_center {
      display: flex;
      .logoimg {
        width: 50rpx;
        height: 50rpx;
      }
      .name {
        margin-left: 20rpx;
        text {
          margin-left: 10rpx;
        }
      }
    }
    .m1 {
      font-weight: 500;
    }
    .m2 {
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #f2f2f2;
      color: #999;
      padding-top: 10rpx;
      font-size: 24rpx;
    }
    .xin1 {
      border-bottom: 1rpx solid #f2f2f2;
      margin-bottom: 30rpx;
      .toubox {
        padding: 10rpx 0;
        display: flex;
        .t1 {
          font-size: 28rpx;
          margin-right: 30rpx;
          margin-top: 11rpx;
        }
        .avatarbox {
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
        }
        .avatarimg {
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
        }
      }
    }
    .buttoncss {
      background-color: #fff;
      border-radius: 0px;
      border: 0rpx solid transparent;
      display: flex;
    }
    button::after {
      border: 0px solid rgba(0, 0, 0, 0.2);
    }
    .nick {
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid #f2f2f2;
      display: flex;
      align-items: center;
      padding-left: 14px;
      padding-right: 14px;
      .n1 {
        font-size: 28rpx;
        margin-right: 30rpx;
      }
    }
    .wan {
      position: relative;
      height: 100rpx;
      box-shadow: 0rpx 0rpx 0rpx 0rpx;
      margin-top: 30rpx;
    }

    .mt30 {
      margin-top: 30rpx;
    }
  }
  .loginvalue {
    width: 750rpx;
    height: 450rpx;
    background-color: #fff;
    .logotitle {
      width: 84%;
      padding: 30rpx 8% 0rpx 8%;
      height: 100rpx;
      display: flex;
      justify-content: flex-start;
      .logo {
        width: 50rpx;
        height: 50rpx;
        line-height: 130rpx;
      }
      .title {
        line-height: 100upx;
        height: 100upx;
        font-weight: 500upx;
        color: black;
        margin-left: 10rpx;
      }
    }
    .titlename {
      width: 84%;
      height: 100rpx;
      padding: 0upx 8%;
      line-height: 100rpx;
      font-weight: 600rpx;
      color: black;
    }
    .titlemin {
      width: 84%;
      padding: 0rpx 8%;
      height: 100rpx;
      line-height: 10rpx;
      color: black;
    }
    .submitbox {
      padding: 0rpx 8%;
      height: 80rpx;
      line-height: 80rpx;
      display: flex;
      justify-content: center;
      .close {
        width: 200rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        color: orange;
        background-color: #111111;
        border-radius: 10rpx;
        margin-right: 40rpx;
      }
      .open {
        width: 200rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background-color: orange;
        color: white;
        border-radius: 10rpx;
        margin-left: 40rpx;
        position: relative;
        button::after {
          height: 80rpx;
          line-height: 80rpx;
          color: white;
          text-align: center;
          width: 200rpx;
          padding: 0rpx;
        }
        button {
          position: absolute;
          top: 0rpx;
          left: 0rpx;
          height: 80rpx;
          line-height: 80rpx;
          background-color: orange;
          color: #ffffff;
          text-align: center;
          width: 200rpx;
          padding: 0rpx;
        }
      }
    }
  }

.container {
  margin: 0;
}

.info {
  display: flex;
  padding: 40rpx;
  background-color: #f5f5f5;
}

.info .left {
  flex: 3;
  display: flex;
  align-items: center;
  align-content: center;
}

.info .right {
  flex: 1;
}

.info .left .nickname {
  font-size: 26px;
  font-weight: bold;
}

.info .left .email {
  font-size: 12px;
  color: gray;
}

.info .right .xcx {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100%;
  overflow: hidden;
}

.banner-warpper {
  background-color: #f5f5f5;
}

.banner {
  width: auto;
  margin: 0 40rpx;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  height: 60px;
  background: rgb(34, 52, 70);
  background: linear-gradient(133deg,
      rgba(34, 52, 70, 1) 35%,
      rgba(44, 62, 80, 1) 100%);
  box-shadow: 0 10px 10px rgb(34, 52, 70);
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner .left {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.banner .right {
  flex: 2;
  display: flex;
  justify-content: center;
}

.banner .left .group {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.banner .left .join {
  color: #aaa;
  font-size: 10px;
  padding-top: 4px;
}

.grid1 {
  padding: 20px 40rpx;
  background-color: #fff;
}

.grid1 .van-grid-item {
  color: var(--color-primary);
}

.grid2 {
  padding: 0 40rpx;
  background-color: #fff;
}

.grid2 .title {
  font-size: 16px;
  font-weight: bold;
  padding: 0 10rpx 10px;
}

.actions {
  display: flex;
  padding: 20px 40rpx;
}

.contact {
  flex: 1;
  padding-right: 4px;
}

.logout {
  flex: 1;
  padding-left: 4px;
}

.btn-vertical {
  background-color: rgb(0, 0, 0, 0) !important;
  border: 0 !important;
  width: 100%;
  height: 100% !important;
  padding: 15px !important;
}

.btn-vertical.van-button--active:before {
  opacity: 1;
  background-color: rgb(0, 0, 0, 0) !important;
}

.btn-vertical__icon {
  font-size: 26px;
  align-items: center;
  justify-content: center;
}

.btn-vertical__text {
  margin-top: 6px;
  word-wrap: break-word;
  color: var(--grid-item-text-color, #646566);
  font-size: var(--grid-item-text-font-size, 12px);
}

.menu .u-icon {
  justify-content: center !important;
}
</style>